<!--
@Description:添加用户名单
@Author:zqy
@Date:2024-01-19 14:39:53
@Last Modified by:zqy
@Last Modified time:2024-01-19 14:39:53
-->
<template>
  <el-dialog
    ref="refDlg"
    v-el-drag-dialog
    width="700px"
    title="选择用户"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    class="dialog-content-no-padding-top"
    @close="closeDialog"
  >
    <div class="table-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="选择" name="first">
          <table-box
            ref="refTable"
            :table-config="tableConfig"
            :other-filters="otherFilters"
            :other-raw="paramsRaw"
            :table-height="400"
            :table-row-key="getKey"
            :selected-arry.sync="tableSelected"
            :table-row-class-name="tableRowClassName"
            :show-custom-setting="false"
            :show-custom-combine="false"
            :table-sortable="false"
            :show-selection="multiple"
            reserve-selection
            @data-change="tableDataChange"
            @row-dblclick="dbClickRow"
            @selection-change="selectionChangeHandle"
          >
            <!-- <el-table-column v-if="multiple" slot="before" type="selection" reserve-selection width="40" /> -->
          </table-box>
        </el-tab-pane>
        <el-tab-pane v-if="multiple" :label="`已选(${selectedData.length})`" name="second">
          <div class="table-list-box">
            <el-table
              style="width: 100%"
              :data="selectedData"
              :height="480"
              header-row-class-name="table-list-header"
              highlight-current-row
              border
            >
              <el-table-column prop="account" label="账号" min-width="150" />
              <el-table-column prop="userName" label="姓名" min-width="150" />
              <el-table-column prop="staffCode" label="员工编码" min-width="150" />
              <el-table-column label="操作" width="80" fixed="right">
                <template v-slot="{row}">
                  <el-button class="my-button" type="text" size="mini" @click="delSelectedRow(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button type="primary" size="mini" @click="handleSure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PermissionRoleList',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      otherFilters: [],
      paramsRaw: {},
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/roleAccountList/userPage`,
        onlySearchBar: true,
        tabIndex: 10,
        sort: '',
        order: 'desc',
        setting: [
          {
            prop: 'account',
            label: '账号',
            minWidth: 120
          },
          {
            prop: 'userName',
            label: '姓名',
            minWidth: 150
          },
          {
            prop: 'staffCode',
            label: '员工编码',
            minWidth: 150
          }
        ]
      },
      tableSelected: [], // 单选行
      selectedRows: [], // 多选行
      activeName: 'first',
      allTableData: [],
      otherSelected: []
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    selectedData() {
      const exTableData = this.otherSelected.filter(v => {
        return !this.selectedRows.some(row => row.userId === v.userId)
      })
      return [...exTableData, ...this.selectedRows]
    }
  },
  watch: {

  },
  created() {

  },
  methods: {
    closeDialog() {
      this.selectedRows.forEach(row => {
        this.$refs.refTable.toggleRowSelection(row, false)
      })
      this.selectedRows = []
      this.tableSelected = []
      this.activeName = 'first'
      this.dialogShow = false
    },
    handleClick() {

    },
    getKey(row) {
      return row.userId
      // return `${row.orgCode}_${row.userId}`
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.selectedRows.filter(item => item.userId === row.userId)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    tableDataChange(res) {
      this.allTableData = (res && res.data && res.data.records) || []
      this.$nextTick(() => {
        if (this.otherSelected && this.otherSelected.length > 0) {
          this.otherSelected.forEach(row => {
            const tmp = this.allTableData.filter(v => v.userId === row.userId)
            if (tmp.length > 0) {
              // 在当前页表格数据中则选中
              this.$refs.refTable.toggleRowSelection(tmp[0], true)
            }
          })
        }
      })
    },
    selectionChangeHandle(rows) {
      this.selectedRows = rows
    },
    // 移除已选择
    delSelectedRow(row) {
      const tmp = this.selectedRows.filter(item => item.userId === row.userId)
      if (tmp.length > 0) { // 在当前页表格数据中则取消选中
        this.$refs.refTable.toggleRowSelection(tmp[0], false)
      } else {
        const index = this.selectedRows.indexOf(row)
        if (index > -1) {
          this.selectedRows.splice(index, 1)
        }
      }

      const i = this.otherSelected.findIndex(v => v.userId === row.userId)
      if (i > -1) {
        this.otherSelected.splice(i, 1)
      }
    },
    dbClickRow(row, e) {
      if (this.multiple) return
      this.tableSelected = [row]
      this.handleSure()
    },
    handleSure() {
      const selectedData = this.multiple ? this.selectedData : [this.tableSelected[0]]
      if (selectedData.length === 0) {
        this.$message.warning('请先选择角色')
        return
      }
      this.$emit('change', this.multiple ? selectedData : this.tableSelected[0])
      this.closeDialog()
    }
  }
}
</script>

<style lang='scss' scope >
</style>
